<template>
  <div class="vacation-rules-container">
    <div class="page-header">
      <div style="margin-right: 30px">
        <el-select v-model="selectstate" placeholder="请选择查询条件" style="width: 240px">
          <el-option
            v-for="item in optionsstate"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <el-button style="transform: translateX(-25px);" type="primary" @click="handleSelect">
          <el-icon><Search /></el-icon>
          点击查询
        </el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="dataList" border style="width: 100%">

      <el-table-column label="调出门店" width="150">
        <template #default="scope">
         <span style="color: #e96725;">
          {{ scope.row.out_shop.shop_name }}
         </span>
        </template>
      </el-table-column>

      <el-table-column label="调入门店" width="150">
        <template #default="scope">
          {{ scope.row.in_shop.shop_name }}
        </template>
      </el-table-column>



      <el-table-column label="调拨类型" min-width="120">
        <template #default="scope">     
         <span v-if="scope.row.transfer_name!=''">
          {{ scope.row.transfer_name }}
         </span>
         <span v-else>
          不存在的类型
         </span>

        </template>
      </el-table-column>

      <el-table-column label="调拨人员" min-width="120">
        <template #default="scope">
          <span v-for="item in scope.row.userid_list"> {{ item.username }}&nbsp </span>
        </template>
      </el-table-column>

      <el-table-column label="调拨时间" min-width="120">
        <template #default="scope">
          {{ scope.row.start_date }} - {{ scope.row.end_date }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
        
          <el-button :disabled="row.state != '1'" size="small" type="success" @click="tongyi(row)">同意</el-button>


          <el-popconfirm 
          
                    title="是否确定拒绝？"
                    @confirm="jujue(row)"
                 >
                  <template #reference>
                    <el-button :disabled="row.state != '1'" size="small" type="danger">拒绝</el-button>
                  </template>
                </el-popconfirm>


          <!-- <el-button v-if="row.state == '1'" type="danger" link @click="jujue(row)">拒绝 </el-button> -->
          <!-- <el-button type="danger" link @click="handleDelete(row)"> 删除 </el-button> -->
          <el-button :disabled="row.state != '2'" size="small" type="warning" @click="quash(row)">撤销</el-button>
        </template>
      </el-table-column>
      <el-table-column label="调拨状态" width="150">
        <template #default="scope">
          <span
            v-if="scope.row.state == '2'"
            style="
              background-color: #56bc5b;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            ">
            通过
          </span>

          <span
            v-else-if="scope.row.state == '1' || scope.row.state == null"
            style="
              background-color: #c0c4cc;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            "
           >
            待审核
          </span>

          <span
            v-else-if="scope.row.state == '3'"
            style="
              background-color: #e96725;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            "
          >
            拒绝
          </span>

          <span
            v-else-if="scope.row.state == '4'"
            style="
              background-color: #e6a23c;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            "
          >
          已撤销
          </span>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display: flex; align-items: center">
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 50]"
          :size="size"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalpage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { gettransferpage, puttransfer } from "@/api/allocationManagement";

import { ElCascader, ElSelect, ElOption, ElMessage } from "element-plus";

import type { ComponentSize } from "element-plus";

const currentPage4 = ref(1);
const pageSize4 = ref(10);
const size = ref<ComponentSize>("default");
const background = ref(false);
const totalpage = ref();

const handleSizeChange = async (val: number) => {
  if (selectstate.value != "" && selectstate.value != undefined) {
    const res = await gettransferpage(currentPage4.value, pageSize4.value,selectstate.value);
    if (res.code == 200) {
      loading.value = false;
      dataList.value = res.data.items;

      ElMessage.success("查询成功");
    } else {
      ElMessage.error("查询失败");
    }
  } else {
    const res = await gettransferpage(
      currentPage4.value,
      pageSize4.value
    );
    if (res.code == 200) {
      loading.value = false;
      dataList.value = res.data.items;

      ElMessage.success("查询成功");
    } else {
      ElMessage.error("查询失败");
    }
  }
};
const handleCurrentChange = async (val: number) => {
  if (selectstate.value != "" && selectstate.value != undefined) {
    const res = await gettransferpage(currentPage4.value, pageSize4.value,selectstate.value);
    if (res.code == 200) {
      loading.value = false;
      dataList.value = res.data.items;

      ElMessage.success("查询成功");
    } else {
      ElMessage.error("查询失败");
    }
  } else {
    const res = await gettransferpage(
      currentPage4.value,
      pageSize4.value
    );
    if (res.code == 200) {
      loading.value = false;
      dataList.value = res.data.items;

      ElMessage.success("查询成功");
    } else {
      ElMessage.error("查询失败");
    }
  }
};

// 初始化列表数据
const dataList = ref(<Array<unknown> | any>[]);
const loading = ref(<boolean>true);

const postformData = reactive<{
  userid_list?: any;
  in_shop?: any;
  out_shop?: any;
  start_date?: any;
  end_date?: any;
  transfer_type?: any;
  state?: any;
}>({
  userid_list: "",
  in_shop: "",
  out_shop: "",
  start_date: "",
  end_date: "",
  state: "1",
  transfer_type: "",
});

const selectstate = ref('0');

const optionsstate = reactive([
  {
    value: "0",
    label: "全部",
  },
  {
    value: "1",
    label: "待审批",
  },
  {
    value: "2",
    label: "通过",
  },
  {
    value: "3",
    label: "拒绝",
  },
  {
    value: "4",
    label: "撤销",
  },
]);

const handleSelect = async () => {
  loading.value = true;
  const res = await gettransferpage(
    currentPage4.value,
    pageSize4.value,
    selectstate.value
  );

  if (res.code == 200) {
    totalpage.value = res.data.total;
    ElMessage.success("查询成功");
  } else {
    ElMessage.error("查询失败");
  }

  loading.value = false;

  dataList.value = res.data.items;
};

const tongyi = async (row: any) => {
  postformData.in_shop = row.in_shop.shop_id;
  postformData.out_shop = row.out_shop.shop_id;
  postformData.start_date = row.start_date;
  postformData.end_date = row.end_date;
  postformData.state = "2";
  postformData.id = row.id;
  postformData.transfer_type = row.transfer_type;
  postformData.userid_list = row.userid_list[0].userid;

  const res = await puttransfer(postformData);
  if (res.code == 200) {
    ElMessage.success("修改成功");
    getData();
  } else {
    ElMessage.error("修改失败");
  }
};


const quash=async(row:any)=>{
  postformData.in_shop = row.in_shop.shop_id;
  postformData.out_shop = row.out_shop.shop_id;
  postformData.start_date = row.start_date;
  postformData.end_date = row.end_date;
  postformData.state = "4";
  postformData.id = row.id;
  postformData.transfer_type = row.transfer_type;
  postformData.userid_list = row.userid_list[0].userid;

  const res = await puttransfer(postformData);
  if (res.code == 200) {
    ElMessage.success("撤销成功");
    getData();
  } else {
    ElMessage.error("撤销失败");
  }
}


const jujue = async (row: any) => {
  postformData.in_shop = row.in_shop.shop_id;
  postformData.out_shop = row.out_shop.shop_id;
  postformData.start_date = row.start_date;
  postformData.end_date = row.end_date;
  postformData.state = "3";
  postformData.id = row.id;
  postformData.transfer_type = row.transfer_type;
  postformData.userid_list = row.userid_list[0].userid;

  const res = await puttransfer(postformData);

  if (res.code == 200) {
    ElMessage.success("修改成功");
    getData();
  } else {
    ElMessage.error("修改失败");
  }
};

// 初始化数据
onMounted(async () => {
  getData();
});

const getData = async () => {

  if (selectstate.value == "0") {
    const res = await gettransferpage(currentPage4.value, pageSize4.value);

    loading.value = false;

    dataList.value = res.data.items;

    totalpage.value = res.data.total;
    currentPage4.value = res.data.page;
  } else if (selectstate.value) {
    const res = await gettransferpage(
      currentPage4.value,
      pageSize4.value,
      selectstate.value
    );

    loading.value = false;

    dataList.value = res.data.items;

    totalpage.value = res.data.total;
    currentPage4.value = res.data.page;
  } else {
    const res = await gettransferpage(currentPage4.value, pageSize4.value);

    loading.value = false;

    dataList.value = res.data.items;

    totalpage.value = res.data.total;
    currentPage4.value = res.data.page;
  }
};
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
